<template>
  <el-container>
    <el-header>
      <Title :title='title1' :SecTitle='title2'></Title>
    </el-header>
    <el-main id="time" class="textcolor">
      <span class="textcolor">时间</span>
      <el-date-picker v-model="find.orderTime" type="date" placeholder="选择日期" id="select_time" value-format="timestamp"></el-date-picker>
      <span class="textcolor mar-left">编号</span>
      <el-input v-model="find.orderNo" placeholder="请输入编号" maxlength='100'></el-input>
      <span class="textcolor mar-left">用户</span>
      <el-input v-model="find.name" placeholder="请输入姓名" maxlength='100'></el-input>
      <span class="textcolor mar-left">陪护员</span>
      <el-input v-model="find.escortsName" placeholder="请输入陪护员" maxlength='100'></el-input><br>
      <div id="statu_box">
        <span class="textcolor mar-top">状态</span>
        <el-select v-model="find.orderStatus" placeholder="请选择" style="text-align:left;" clearable>
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-button type="primary" @click="findOrder">筛选</el-button>
      </div>
    </el-main>
    <el-main id="content_box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="orderNo" label="订单编号" width="113" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="userId" label="ID" width="103" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="162" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="72" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="serviceType" label="服务类型" width="86" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="price" label="订单价格" width="86" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="realPay" label="实付金额" width="86" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="escortsName" label="陪护员" width="72" header-align="center" align="center">
        </el-table-column>
        <el-table-column prop="orderStatus" label="状态" width="110" header-align="center" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center" width="85">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
       <Page
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="find.pageSize"
        :currentPage="find.page"
      ></Page>
    </el-main>
  </el-container>
</template>

<script>
import Title from '@/components/common/title.vue'
import Page from '@/components/paging/paging.vue'
export default {
  data() {
    return {
      total: 0, //总共多少条，这个需要通过接口获取后赋值
      title1: '订单管理',
      title2: '订单列表',
      find: {
        orderTime: '',
        orderNo: '',
        name: '',
        escortsName: '',
        orderStatus: '',
        pageSize: 4,
        page: 1,
      },
      options: [
        {
          value: 0,
          label: '待付款'
        },
        {
          value: 1,
          label: '已付款'
        },
        {
          value: 2,
          label: '已退款'
        },
      ],
      tableData: [
      ]
    };
  },
  components: {
    Title,
    Page
  },
  methods: {
    handleDelete(index, row) {
      var that = this;
      this.$confirm('此操作将删除该项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        that.tableData.some((item) => {
          if (item.id == row.id) {
            that.tableData.splice(index, 1)
            this.deleteData(item.id)
            return true
          }
        })
        this.$message({
          type: 'success',
          message: '删除成功!',
          duration: 700
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
          duration: 700
        });
      })
    },
    //分页
    getPagesize(val) {
      this.find.pageSize = val;
      this.getData();
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.find.page = val;
      this.getData();
    },
    async getData() {
      const { data: res } = await this.axios({
        method: "POST",
        url: "/order/list",
        data: {
          orderTime:this.find.orderTime,
          orderNo:this.find.orderNo,
          name:this.find.name,
          escortsName:this.find.escortsName,
          orderStatus:this.find.orderStatus,
          pageSize:this.find.pageSize,
          page:this.find.page
        },
       
      })
      console.log(res)
      if (res.code == 0) {
        this.total = res.count
        this.tableData = res.data;
        this.tableData.forEach(element => {
          if (element.orderStatus == 0) {
            element.orderStatus = '待付款'
          } else if(element.orderStatus == 1) {
            element.orderStatus = '已付款'
          }else if(element.orderStatus == 2) {
            element.orderStatus = '已取消'
          }else if(element.orderStatus == 3) {
            element.orderStatus = '退款中'
          }else if(element.orderStatus == 4) {
            element.orderStatus = '同意退款'
          }else if(element.orderStatus == 5) {
            element.orderStatus = '拒绝退款'
          }
          element.orderTime = this.timestampToTime(element.orderTime)
        });
      }
    },
    timestampToTime(time) {
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var date = new Date(time)
      let y = date.getFullYear()
      let MM = date.getMonth() + 1
      MM = MM < 10 ? ('0' + MM) : MM
      let d = date.getDate()
      d = d < 10 ? ('0' + d) : d
      let h = date.getHours()
      h = h < 10 ? ('0' + h) : h
      let m = date.getMinutes()
      m = m < 10 ? ('0' + m) : m
      let s = date.getSeconds()
      s = s < 10 ? ('0' + s) : s
      return y + '年' + MM + '月' + d + '日'
    },
    async deleteData(id) {
      const { data: res } = await this.axios({
        method: "get",
        url: "/order/delete/" + id,
      
      })
      console.log(res)
    },
    findOrder() {
      this.getData()
    },
  },
  created() {
    this.getData();
  }

};
</script>

<style lang="less" scoped>
.textcolor {
  color: rgb(49, 49, 49);
}
#time {
  padding: 20px 10px;
  background-color: white;
  margin-top: 30px;
  border-radius: 5px;
  span {
    margin-right: 10px;
  }
  & > div {
    width: 200px;
    display: inline-block;
  }
  & > #statu_box {
    margin-top: 20px;
    width: 360px;
    & > div {
      width: 200px;
      margin-right: 20px;
    }
  }
}
.mar-left {
  margin-left: 20px;
}
#content_box {
  height: 429px;
  background-color: rgb(255, 255, 255);
  margin-top: 30px;
  border-radius: 5px;
  overflow: hidden;
}
#content_box:hover {
  overflow: auto;
}
.el-table::before {
  display: none !important;
}
</style>